<div>
  <mat-table [dataSource]="dataSource">

    <ng-container cdkColumnDef="source">
      <mat-header-cell *cdkHeaderCellDef>
        <ng-container i18n="services.form.label.attrRelease.policies.sourceAttribute">
          {{ messages.services_form_label_attrRelease_policies_sourceAttribute }}
        </ng-container>
      </mat-header-cell>
      <mat-cell *cdkCellDef="let row"> {{ row.source }}</mat-cell>
    </ng-container>

    <ng-container cdkColumnDef="mapped">
      <mat-header-cell *cdkHeaderCellDef>
        <ng-container i18n="services.form.label.attrRelease.policies.casAttribute">
          {{ messages.services_form_label_attrRelease_policies_casAttribute }}
        </ng-container>
      </mat-header-cell>
      <mat-cell *cdkCellDef="let row">
        <mat-form-field>
          <input matInput
                 [ngModel]="attributes[row.source]"
                 (ngModelChange)="attributes[row.source] = $event.split(',')">
        </mat-form-field>
      </mat-cell>
    </ng-container>

    <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>

  </mat-table>
</div>
